<template>
	<view class="container">
		<view class="gradient-bg">
			<view class="page-header">
				<text class="page-title">我的团队</text>
				<text class="page-subtitle">邀请好友加入，共享收益</text>
			</view>
			
			<view class="team-card" v-if="iskq==1">
				<view class="card-header">
					<view class="header-content">
						<image src="/static/team-icon.png" class="header-icon"></image>
						
						<view class="page-title">我的团队成员</view>
					</view>
				
				</view>
				
				<view class="stats-row">
					<view class="stat-item">
						<text class="stat-value">{{data.length || 0}}</text>
						<text class="stat-label">团队成员</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<text class="stat-value">0</text>
						<text class="stat-label">今日新增</text>
					</view>
				</view>
				
				<view class="member-grid">
					<block v-for="(value,key) in data" :key="key">
					<view class="member-item">
						<view class="member-avatar">
							<image :src="value.avatar?value.avatar:value.url" class="avatar-img" mode="aspectFill"></image>
							<view class="online-dot" v-if="key%3===0"></view>
						</view>
						<view class="member-id">{{value.id}}</view>
					</view>
					</block>
					<view class="member-item add-item" @click="share">
						<view class="add-icon">+</view>
						<view class="member-id">邀请</view>
					</view>
				</view>
				
				<view class="invite-tips">
					<image src="/static/light-bulb.png" class="tips-icon"></image>
					<text>邀请好友得奖励</text>
				</view>
			</view>	
			
			<view class="empty-card" v-else>
				<image src="/static/empty-team.png" class="empty-image"></image>
				<view class="empty-title">系统后台没有开通分销</view>
				<view class="empty-desc">请联系管理员开通分销功能</view>
				<button class="contact-btn" @click="contactAdmin">联系管理员</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				data:[],
				iskq:0,
				uid:0,
			}
		},
		onLoad(){
			if(uni.getStorageSync("userinfo")){
				 this.uid=uni.getStorageSync("userinfo").id
			}
			if(uni.getStorageSync("config").iskq){
				this.iskq=uni.getStorageSync("config").iskq;
			}
			this.ongrzlTap();
		},
		onShareAppMessage: function(res) {
			  // #ifdef MP-WEIXIN
			var href='/pages/login/login?fxpid='+this.uid
		    console.log(res)
		    let that = this;
		    const obj = {
		      title: "加入我的团队，共享收益",
		      imageUrl: '/static/share-image.jpg',
		      path: href,
		      success: function(res) {
		        console.log(res, "转发成功")
		      },
		      fail: function(res) {
		        wx.showToast({
		          title: '发送失败',
		          icon:'none'
		        })
		      }
		    }
		    return obj
			  // #endif
		},
		methods:{
			share(){
					  // #ifdef H5
					  var href='/pages/login/reg?uid='+this.uid
					  uni.setClipboardData({
					  	data: this.configs.webUrl+'/h5/#'+href,
					  	complete() {
					  		uni.showToast({
					  			title: "分享连接已复制到剪贴板"
					  		})
					  	}
					  })
					  // #endif
					  // #ifndef H5
					  var href='/pages/login/reg?uid='+this.uid
					  uni.share({
					  	provider: "weixin",
					  	scene: "WXSenceTimeline",
					  	type: 0,
					  	href: href,
					  	title: '加入我的团队，共享收益',
					  	summary: '我正在使用这个平台，邀请你一起加入',
					  	imageUrl: '/static/share-image.jpg',
					  	success: function(res) {
					  		console.log("success:" + JSON.stringify(res));
					  	},
					  	fail: function(err) {
					  		console.log("fail:" + JSON.stringify(err));
					  	}
					  })
					  // #endif
			},
			contactAdmin() {
				uni.makePhoneCall({
					phoneNumber: '400-123-4567'
				});
			},
			async ongrzlTap(){
				let data = {};
				data.token = uni.getStorageSync("userinfo").token;

				uni.request({
					url: this.configs.webUrl+'/api/user/mytuandui',
					data: data,
					success: res =>{
						if(res.data.code==1){
							this.data=res.data.data
						}else{
							uni.showToast({ title: res.data.msg,icon:"none" });
						}
					},
					fail: (data, code) => {
						//console.log('fail' + JSON.stringify(data));
					}
				});		
			},
		}
	}
</script>

<style>
	/* 基础样式 */
	page {
		background: #000000;
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	}
	
	.container {
		width: 100%;
		min-height: 100vh;
	}
	
	.gradient-bg {
		background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
		padding: 30rpx;
	}
	
	/* 页面头部样式 */
	.page-header {
		text-align: center;
		margin-bottom: 50rpx;
		padding: 30rpx 0;
	}
	
	.page-title {
		font-size: 48rpx;
		font-weight: bold;
		color: #FFD700;
		display: block;	
		margin-bottom: 16rpx;
		text-shadow: 0 2rpx 4rpx rgba(255, 215, 0, 0.3);
	}
	
	.page-subtitle {
		font-size: 28rpx;
		color: #AAAAAA;
		display: block;
	}
	
	/* 团队卡片样式 */
	.team-card {
		background: rgba(26, 26, 26, 0.8);
		border-radius: 24rpx;
		padding: 40rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.5);
		border: 1rpx solid #333333;
		margin-bottom: 40rpx;
		backdrop-filter: blur(10rpx);
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(255, 215, 0, 0.2);
	}
	
	.header-content {
		display: flex;
		align-items: center;
	}
	
	.header-icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 20rpx;
	}
	
	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
	}	
	
	.share-btn {
		background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
		color: #000000;
		font-size: 28rpx;
		font-weight: bold;
		padding: 16rpx 32rpx;
		border-radius: 50rpx;
		border: none;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 15rpx rgba(255, 215, 0, 0.3);
		transition: all 0.3s ease;
	}
	
	.btn-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
	
	.share-btn:active {
		transform: scale(0.95);
		opacity: 0.9;
	}
	
	/* 统计行样式 */
	.stats-row {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 40rpx;
	}
	
	.stat-item {
		flex: 1;
		text-align: center;
	}
	
	.stat-value {
		font-size: 48rpx;
		font-weight: bold;
		color: #FFD700;
		display: block;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #AAAAAA;
		display: block;
		margin-top: 8rpx;
	}
	
	.stat-divider {
		width: 1rpx;
		height: 60rpx;
		background: rgba(255, 215, 0, 0.3);
	}
	
	/* 成员网格样式 */
	.member-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 30rpx;
		margin-bottom: 40rpx;
	}
	
	.member-item {
		text-align: center;
		width: calc(20% - 24rpx);
	}
	
	.member-avatar {
		position: relative;
		margin-bottom: 16rpx;
	}
	
	.avatar-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: #333333;
		border: 3rpx solid #FFD700;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
	}
	
	.online-dot {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #34C759;
		border: 2rpx solid #1a1a1a;
	}
	
	.member-id {
		font-size: 24rpx;
		color: #CCCCCC;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.add-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.add-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: rgba(255, 215, 0, 0.1);
		border: 2rpx dashed rgba(255, 215, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		color: #FFD700;
		margin-bottom: 16rpx;
	}
	
	/* 邀请提示 */
	.invite-tips {
		background: rgba(255, 215, 0, 0.1);
		border-radius: 12rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		border: 1rpx solid rgba(255, 215, 0, 0.2);
	}
	
	.tips-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 15rpx;
	}
	
	.invite-tips text {
		font-size: 24rpx;
		color: #FFD700;
	}
	
	/* 空状态样式 */
	.empty-card {
		background: rgba(26, 26, 26, 0.8);
		border-radius: 24rpx;
		padding: 60rpx 30rpx;
		text-align: center;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.5);
		border: 1rpx solid #333333;
		backdrop-filter: blur(10rpx);
	}
	
	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-title {
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-bottom: 16rpx;
		display: block;
	}
	
	.empty-desc {
		font-size: 28rpx;
		color: #999999;
		display: block;
		margin-bottom: 40rpx;
	}
	
	.contact-btn {
		background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
		color: #000000;
		font-size: 28rpx;
		font-weight: bold;
		padding: 20rpx 40rpx;
		border-radius: 50rpx;
		border: none;
		box-shadow: 0 4rpx 15rpx rgba(255, 215, 0, 0.3);
		margin-top: 20rpx;
	}

	.gradient-bg,
	page{
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	}
</style>